<template>
  <div class="mask" @click="closeFilter">
    <div class="filter-container">
      <div class="filter-time">
        <span :class="{ active: time == 'in_one_week' }" @click="toggleTime('in_one_week')">一周内</span>
        <span :class="{ active: time == 'in_one_month' }" @click="toggleTime('in_one_month')">一月内</span>
        <span :class="{ active: time == 'on_weekends' }" @click="toggleTime('on_weekends')">周末</span>
        <span :class="{ active: time == 'near_the_end' }" @click="toggleTime('near_the_end')">即将结束</span>
      </div>
      <van-radio-group v-model="sort_by.sort_by">
        <van-cell-group>
          <van-cell clickable @click="toggleSortBy('default')">
            <template #title>
              <span :class="{ active: sort_by.sort_by == 'default' }">智能排序</span>
            </template>
            <template #right-icon>
              <van-radio name="default" />
            </template>
          </van-cell>
          <van-cell clickable @click="toggleSortBy('distance')">
            <template #title>
              <span :class="{ active: sort_by.sort_by == 'distance' }">离我最近</span>
            </template>
            <template #right-icon>
              <van-radio name="distance" />
            </template>
          </van-cell>
          <van-cell clickable @click="toggleSortBy('price')">
            <template #title>
              <span :class="{ active: sort_by.sort_by == 'price' }">价格最低</span>
            </template>
            <template #right-icon>
              <van-radio name="price" />
            </template>
          </van-cell>
          <van-cell clickable @click="toggleSortBy('new')">
            <template #title>
              <span :class="{ active: sort_by == 'new' }">最新上线</span>
            </template>
            <template #right-icon>
              <van-radio name="new" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>

      <div class="btn">
        <button class="reset" @click="reset">重置</button>
        <button class="submit" @click="submit">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['time', 'sort_by'])
  },
  methods: {
    ...mapMutations(['reset', 'toggleSortBy', 'toggleTime']),
    submit() {
      // 重新发请求
      this.$emit('submit')
      this.$emit('close-filter')
    },
    closeFilter(evt) {
      if (evt.target._prevClass == 'mask') {
        this.$emit('close-filter')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding-top: 90px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  height: 100vh;

  .filter-container {
    padding: 20px 10px;
    background-color: #fff;

    .filter-time {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;

      span {
        width: 70px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        margin: 5px;
        background-color: #f1f1f1;

        &.active {
          color: #d94648;
        }
      }
    }
    .btn {
      margin-top: 30px;
      text-align: center;

      button {
        outline: none;
        border: 1px solid;
        width: 100px;
        height: 35px;
        border-radius: 5px;
        font-size: 14px;

        &.reset {
          color: #777;
          border-color: #aaa;
          background-color: #fafafa;
        }

        &.submit {
          background-color: #d94648;
          border-color: #d94648;
          color: #fff;
          margin-left: 20px;
        }
      }
    }
    .van-cell__title span {
      color: #000;
      font-weight: 600;

      &.active {
        color: #d94648;
      }
    }
    ::v-deep .van-radio__icon--checked .van-icon {
      background-color: #d94648;
      border-color: #d94648;
    }
  }
}
</style>
